/**
 * 头部对象构造函数
 */
function Header() {
	this.createDom();
  this.createModal();
  this.addListener();
	this.load();
}

// 头部导航模板字符串
Header.template = ` <!-- 导航头 -->

<nav class="navbar navbar-default" style="background: #2468a9; position:fixed;top:0; width:100%; z-index:999;">
    <div class="container-fluid">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <a class="navbar-brand" href="#" style="color: white;">进存销管理系统</a>
      </div>
  
      <ul class="nav navbar-nav navbar-right login-success hide">
                <li style="color: white; margin-top:15px;"><i class="glyphicon glyphicon-user"></i></li>
                <li><a href="#" style="color: white;">管理员</a></li>
                <li class="link-logout"><a href="javascript:void(0);" style="color: white;">注销</a></li>
                </ul>
      <ul class="nav navbar-nav navbar-right not-login">
	        <li data-toggle="modal" data-target="#loginModal" class="link-login"><a href="#" style="color:white;">登录</a></li>
	        <li data-toggle="modal" data-target="#registerModal"  class="link-register"><a href="#" style="color:white;"s>注册</a></li>	        
	      </ul>      
    </div><!-- /.container-fluid -->
  </nav>
  
  <!-- //下拉菜单 -->
  <div class="select" style="width: 191px; height: 541px; position: fixed; left: 0; top: 51px;">
        <div class="dropdown">
                <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" style=" width: 273px; background: #E5E5E5">
                  系统菜单
                  <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" aria-labelledby="dropdownMenu1" style="width: 273px;">
                  <li id="fenlei"><a href="#">分类管理</a></li>
                  <li role="separator" class="divider"></li>
                  <li id="kucun"><a href="#">库存管理</a></li>
                  <li role="separator" class="divider"></li>
                  <li id="ruku"><a href="#">入库管理</a></li>
                  <li role="separator" class="divider"></li>
                  <li id="yujing"><a href="#">预警信息设置</a></li>
                  <li role="separator" class="divider"></li>
                  <li id="chuku"><a href="#">出库管理</a></li>
                  <li role="separator" class="divider"></li>
                  <li id="yonghu"><a href="#">用户管理</a></li>
                  <li role="separator" class="divider"></li>
                  <li id="modifi"><a href="#">修改密码</a></li>
                </ul>
              </div>
  </div>`;

/**
 * 原型
 */
$.extend(Header.prototype, {
	// 创建DOM元素并渲染
	createDom() {
		$(Header.template).appendTo("header");
  },
  createModal() {
		new LoginModal();
		new RegisterModal();
	},
	// 页面加载处理
	load() {
		// 页面加载时要判断是否有用户登录过，有则显示用户信息及注销链接
		let user = sessionStorage.loginUser;
		if (user) {
			user = JSON.parse(user);
			$(".login-success")
				.removeClass("hide")
			$(".not-login").remove();
		}
	},
	// 注册事件监听
	addListener() {
		// 点击登录、注册链接
		$(".link-login,.link-register").on("click", this.genCaptchaHandler)
		// 点击注销链接
		$(".link-logout").on("click", this.logoutHandler);
	},
	// 生成验证码
	genCaptchaHandler() {
		$.get("/captcha/gencode", (data)=>{
			$(".code-img").html(data);
		}, "text");
	},
	// 注销
	logoutHandler() {
		sessionStorage.removeItem("loginUser");
		window.location.href = "/index.html";
	}
	
});

// 创建头部对象实例
new Header();